<template>
  <div class="sp-main-info">
    <t-loading size="small" :loading="loading" show-overlay>
      <t-form ref="form" :data="userForm" label-width="160px" :rules="rules" @submit="onSubmit">
        <t-form-item label="账号" name="userName">
          <t-input v-model="userForm.userName" placeholder="请输入账号"></t-input>
        </t-form-item>
        <t-form-item label="用户昵称" name="nickName">
          <t-input v-model="userForm.nickName" placeholder="请输入用户昵称"></t-input>
        </t-form-item>
        <t-form-item label="手机号" name="phone">
          <t-input v-model="userForm.phone" disabled placeholder="请输入手机号"></t-input>
        </t-form-item>
        <t-form-item label="收款人姓名" name="payName">
          <t-input v-model="userForm.payName" placeholder="请输入收款人姓名"></t-input>
        </t-form-item>
        <t-form-item label="银行卡账号" name="payCode">
          <t-input v-model="userForm.payCode" placeholder="请输入银行卡账号"></t-input>
        </t-form-item>
        <t-form-item label="银行开户行" name="payBank">
          <t-input v-model="userForm.payBank" placeholder="请输入银行开户行"></t-input>
        </t-form-item>
        <t-form-item style="padding-top: 8px">
          <t-button theme="primary" type="submit" :loading="saveBtn.loading" style="margin-right: 10px">{{
            saveBtn.text
          }}</t-button>
        </t-form-item>
      </t-form>
    </t-loading>
  </div>
</template>

<script lang="ts">
export default {
  name: 'UserBase',
};
</script>

<script setup lang="ts">
import { ref, onMounted, computed, reactive } from 'vue';
import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next';
import { queryUser, updateUser } from '@/api/system/user';
import { useUserStore } from "@/store";

const form = ref(null);

const loading = ref(false);
const saveBtn = reactive({
  text: '保存',
  loading: false,
});

const emit = defineEmits(['updateUserInStore']);
const suffix = computed(() => {
  return `${userForm.nickName.length}/10`;
});
const userStore = useUserStore();
const userInfo = userStore.userInfo.user;
const initData = async () => {
  form.value.reset();
  // loading.value = true;
  userForm.id = userInfo.id;
  userForm.nickName = userInfo.nickName;
  userForm.userName = userInfo.userName;
  userForm.phone = userInfo.phone;
  userForm.amount = userInfo.amount;
  userForm.iconUrl = userInfo.iconUrl;
  userForm.payName = userInfo.payName;
  userForm.payCode = userInfo.payCode;
  userForm.payBank = userInfo.payBank;
  // try {
  //   const res = await queryUser();
  //   if (res.data) {
  //     userForm.id = res.data.id;
  //     userForm.nickName = res.data.nickName;
  //   }
  // } catch (error) {
  //   MessagePlugin.error(error.message);
  // } finally {
  //   loading.value = false;
  // }
};

// 表单
const rules = {
  nickName: [{ required: true, message: '请输入用户昵称', type: 'error', trigger: 'change' }],
};
const userForm = reactive({
  id: '',
  nickName: '',
  userName: '',
  phone: '',
  amount: '',
  iconUrl: '',
  payName: '',
  payCode: '',
  payBank: '',
});
const onSubmit = async ({ validateResult }) => {
  if (validateResult === true) {
    const confirmDia = DialogPlugin({
      header: '提醒',
      body: '是否确定保存本次修改?',
      confirmBtn: '确定',
      // cancelBtn: '暂不',
      onConfirm: async ({ e }) => {
        saveBtn.text = '保存中...';
        saveBtn.loading = true;
        confirmDia.hide();
        try {
          const res = await updateUser(userForm);
          if (res.code === 0) {
            emit('updateUserInStore');
            MessagePlugin.success('保存成功');
          } else {
            MessagePlugin.error(`保存失败：${res.msg}`);
          }
        } catch (error) {
          MessagePlugin.error(`保存失败：${error}`);
        } finally {
          saveBtn.text = '保存';
          saveBtn.loading = false;
        }
      },
      onClose: ({ e, trigger }) => {
        confirmDia.hide();
      },
    });
  }
};
// vue的api
onMounted(async () => {
  await initData();
});

defineExpose({
  initData,
});
</script>

<style lang="less" scoped>
@import '@/style/variables';

.sp-main-info {
  padding: 30px;
  width: 50%;
}
</style>
